<template>
  <div class="map-tool">
    <div class="btn-group">
      <div class="btn"
        :class="{'active': active === 'position'}"
        @click="posSelect">定位</div>
      <div class="btn"
        :class="{'active': active === 'heat'}"
        @click="heatSelect">热力图</div>
      <div class="btn"
        :class="{'active': active === 'colour'}"
        @click="colourSelect">分级设色</div>
      <div class="btn"
        :class="{'active': active === 'colourchart'}"
        @click="colorAndChartSelect">添加图表</div>
      <div class="btn"
        :class="{'active': active === 'point'}"
        @click="pointSelect">点选范围</div>
      <div class="btn"
        :class="{'active': active === 'area'}"
        @click="areaSelect">画面</div>
      <div class="btn"
        :class="{'active': active === 'line'}"
        @click="lineSelect">画线</div>
      <div class="btn"
        @click="clear">清除</div>
      <div class="btn"
        @click="reset">回位</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: ''
      };
    },
    methods: {
      heatSelect() {
        this.$emit('btnClick', 'heat');
        this.active = 'heat';
      },
      colourSelect() {
        this.$emit('btnClick', 'colour');
        this.active = 'colour';
      },
      colorAndChartSelect() {
        this.$emit('btnClick', 'colourchart');
        this.active = 'colourchart';
      },
      posSelect() {
        this.$emit('btnClick', 'position');
        this.active = 'position';
      },
      pointSelect() {
        this.$emit('btnClick', 'point');
        this.active = 'point';
      },
      areaSelect() {
        this.$emit('btnClick', 'area');
        this.active = 'area';
      },
      lineSelect() {
        this.$emit('btnClick', 'line');
        this.active = 'line';
      },
      clear() {
        this.$emit('btnClick', 'clear');
        this.active = '';
      },
      reset() {
        this.$emit('btnClick', 'reset');
        this.active = '';
      }
    }
  };
</script>

<style lang="scss" scoped>
  .map-tool {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: $--zindex-map-float-box;
    .btn-group {
      display: flex;
      background-color: #fff;
      border-radius: $--general-radius;
      height: 40px;
      align-items: center;
      .btn {
        padding: 5px 20px;
        cursor: default;
        user-select: none;
      }
      .btn:hover {
        background-color: $--primary-hover;
        color: #fff;
      }
      .btn + .btn {
        border-left: 1px solid $--secondary-text;
      }
      .active {
        background-color: $--primary-hover;
        color: #fff;
      }
    }
  }
</style>

